<template>
  <div v-if="isIcon" class="file-icon" :class="[data.type]" />
  <div v-if="isImage">
    <img :src="data.openPath" style="width: 200px;height: 200px">
  </div>
</template>

<script>
export default {
  props: {
    data: {
      validator: function(value) {
        return ['default', 'folder', 'FOLDER', 'MP4', 'pdf', 'compress_file', 'web',
          'video', 'audio', 'picture', 'doc', 'txt', 'torrent', 'ppt','jpg',"JPG",
          'code'].indexOf(value.type) !== -1
      }
    }
  },
  data(){
    return{
      isIcon:true,
      isImage:false
    }
  },
  created() {

/*    console.log('--------------',this.data.openPath)
    if( this.data.type =='JPG' || this.data.type == "GIF"  || this.data.type == "JPEG" || this.data.type == "PNG"){
      this.isIcon = false;
      this.isImage = true;
      console.log('--------------=------------------------')
    }*/

  },
  methods: {

  }
}
</script>

<style ref="stylesheet/scss" lang="scss" scoped>
.file-icon {
    display: inline-block;
    background-image: url(../../assets/folder/file_icons.png);
    background-repeat: no-repeat;
    width: 26px;
    height: 23px;
}
.default{
    background-position: -596px -566px;
}
.folder{
    background-position: -594px -862px;
}
.FOLDER{
  background-position: -594px -862px;
}
.pdf{
    background-position: -596px -136px;
}
.PDF{
    background-position: -596px -136px;
}
.compress_file{
    background-position: -596px -1664px;
}
.video{
    background-position: -596px -1630px;
}
.MP4{
  background-position: -596px -1630px;
}
.FLV{
  background-position: -596px -1630px;
}
.AVI{
  background-position: -596px -1630px;
}
.audio{
    background-position: -596px -442px;
}
.picture{
    background-position: -596px -306px;
}
.PNG{
  background-position: -596px -306px;
}
.jpg{
  background-position: -596px -306px;
}
.JPG{
  background-position: -596px -306px;
}
.doc {
    background-position: -596px -170px;
}
.DOC {
    background-position: -596px -170px;
}
.DOCX {
  background-position: -596px -170px;
}
.txt {
    background-position: -596px -102px;
}
.ppt {
    background-position: -596px -204px;
}
.TXT {
    background-position: -596px -102px;
}
.PPT {
    background-position: -596px -204px;
}
.torrent {
    background-position: -596px 0px;
}
.web{
    background-position: -594px -1458px;
}
.HTML{
  background-position: -594px -1458px;
}
.code {
    background-position: -596px -1424px;
}
</style>
